<template>
        <div class="findPwd">
        <div class="header" @click="toLast">X</div>
        <div class="title">找回密码</div>
        <van-form validate-first @failed="onFailed" @submit="onSubmit">
   <van-field 
          v-model="email" 
          type="text"
           label="邮箱账号"
           name="checkemail"
            clearable
             placeholder="请填写邮箱"
             :rules="[{ pattern:checkemail, message: '邮箱格式错误' }]"
              />
     <van-field
        v-model="sms"
        center
        clearable
        label="验证码"
        placeholder="请输入邮箱验证码"
        >
        <template #button>
            <van-button size="small" type="primary" :disabled='isEmail' @click="sendEmail">{{codeText}}</van-button>
        </template>
        </van-field>
        <van-field
                v-model="pwd1"
                type="password"
                name="pattern"
                label="密码"
                placeholder="请填写密码"
                clearable
                :rules="[{ pattern:checkpwd, message: '密码最少6位且包含数字和字母' }]"
            />
             <van-field
                v-model="pwd2"
                type="password"
                name="pattern"
                label="确认密码"
                placeholder="再次输入密码"
                clearable
                :rules="[{ pattern:checkpwd, message: '密码最少6位且包含数字和字母' }]"
            />
    <van-button type="primary" block :disabled="isSend" style="marginTop:1rem;">确定</van-button>
    </van-form>
        </div>
</template>
<script>
import { Meteor } from 'meteor/meteor';
export default {
    data() {
        return {
           checkemail:/^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4})*$/,
           checkpwd:/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
           sms:'',
           codeText:'发送',
           email:'',
           pwd1:'',
           pwd2:'',
           isCheckNum:false,
           isSendCode:true
        }
    },
    computed:{
        isSend(){
            if(this.sms.trim().length>0&&this.email.trim().length>0&&this.pwd1.trim().length>0&&this.pwd2.trim().length>0&&this.checkemail.test(this.email)){
                return false
            }else{
                return true
            }
        },
        isEmail(){
            if(this.email.trim().length>0&&this.checkemail.test(this.email)&&this.isSendCode){
                return false
            }
            else{
                return true
            }
        }
    },
    methods:{
        toLast(){
            this.$router.go(-1)
        },
        onFailed(){
            if(!this.isCheckNum){
                this.$toast('请按要求填写内容');
            }
        },
           // 发送邮件
        sendEmail(){
            this.isCheckNum = true
            this.isSendCode = false
                    Meteor.call('email.send',this.email)
                    this.$toast.success('验证码发送成功')
                    let num = 60
                   let timer = setInterval(()=>{
                        this.codeText = num
                        num=num-1
                        if(num == 0){
                            clearInterval(timer)
                            this.codeText = '发送'
                            this.isSendCode = true
                        }
                    },1000)
        },
        onSubmit(){
            if(this.pwd1!==this.pwd2){
                return this.$toast.fail('密码输入不一致')
            }
            else{
                Meteor.call('password.forget',{
                    email:this.email,
                    code:this.sms,
                    password:this.pwd1
                },(err,res)=>{
                    if(err){
                        this.$toast(err.error)
                    }
                    else{
                        this.$toast.success('密码修改成功')
                        this.$router.push('/login')
                    }
                })
            }
        }
    }
}
</script>
<style scoped>
    .findPwd{
    padding:.5rem;
    background-color: #fff;
    height: 100vh;
}
.header{
    font-size: 1rem;
}
.title{
    margin-top: 2rem;
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}
.van-button--small{
    height: 1rem;
}
</style>